import classnames from 'classnames';
import React from "react";
import './ui-text.less';

export enum TextSize {
  larger = 'xlg', // 20
  large = 'lg', // 18
  middle = 'md', // 14
  small = 'sm', // 12
  mini = 'mini' // 10
}

export enum TextType {
  default = "default",
  link = 'link',
  gray = 'gray'
}

export interface UiTextProp {
  type?: string;
  size?: TextSize;
  children: React.ReactNode;
}

export default function UiText(props: UiTextProp) {
  const type = props.type || TextType.default;
  const size = props.size || TextSize.small;

  const classes = classnames('ui-text', {
    [`ui-text-${type}`]: type,
    [`ui-text-${size}`]: size,
  });

  return (
    <span
      className={classes}
      children={props.children}
    />
  );
}